<!--设置表头-->
<template>
  <a-modal
    :visible="modalVisible"
    :title="transferName"
    centered
    :maskClosable="maskClosable"
    @cancel="closeModal"
  >
    <template slot="footer">
      <a-row>
        <a-col :span="14" class="sync-content"
               style="font-size: 14px;color: #386BD7;display: flex;justify-content: flex-start;align-items: center;padding: 8px">
          <div v-if="reset" style="cursor: pointer" @click="toDefault">
            <a-icon type="sync" :style="{ fontSize: '14px', color: '#386BD7' }"/>
            &nbsp;恢复默认值
          </div>
        </a-col>
        <a-col :span="10" style="padding-right: 18px">
          <a-button @click="closeModal">取消</a-button>
          <a-button type="primary" @click="saveHeader">确定</a-button>
        </a-col>
      </a-row>
    </template>
    <a-row type="flex" justify="space-around" class="tableHeaderModal">
      <a-col :span="15">
        <a-row>
          <span class="model-content-title">{{ transferLeftName }}</span>
          <span class="model-content-title otherTitle">(共{{ checkContent_left.length }}个)</span>
        </a-row>
        <a-row>
          <div class="model-content">
            <div class="model-content-header">
              <a-checkbox class="checkBoxNum" :indeterminate="indeterminate_left" :checked="isCheckAll_left"
                          :disabled="checkContent_left.length<1 ? true : false"
                          @change="onChange_all_left">
                {{ checkedList_left.length }}/{{ checkContent_left.length }}条
              </a-checkbox>
            </div>
            <div class="model-content-bottom">
              <div class="model-content-bottom-search">
                <a-input-search placeholder="请输入" allow-clear @change="onSearchLeft(leftSearchInput)"
                                v-model="leftSearchInput" @search="onSearchLeft(leftSearchInput)"/>
              </div>
              <div class="model-content-bottom-conts">
                <a-checkbox-group v-model="checkedList_left" @change="onChange_one_left">
                  <div class="checkCont" v-for="(item,index) in checkContent_left" :key="index">
                    <a-checkbox class="checkBoxNum" :data-index="index" :key="item" :value="item">
                      <a-tooltip v-if="item.length>7">
                        <template slot="title">
                          {{ item }}
                        </template>
                        <span class="checkName">{{ setPoint(item, 7) }}</span>
                      </a-tooltip>
                      <span v-else class="checkName">{{ setPoint(item, 7) }}</span>
                    </a-checkbox>
                  </div>
                </a-checkbox-group>
              </div>
            </div>
          </div>
        </a-row>
      </a-col>
      <a-col :span="2" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
        <a-button type="primary" size="small" :disabled="btnDisable_right"
                  @click="toRightContent(checkContent_left_search,checkedList_left)">
          <a-icon type="right"/>
        </a-button>
        <a-button type="primary" size="small" :disabled="btnDisable_left" style="margin-top: 10px;"
                  @click="toLeftContent(checkContent_right_search,checkedList_right)">
          <a-icon type="left"/>
        </a-button>
      </a-col>
      <a-col :span="7">
        <a-row>
          <span class="model-content-title">{{ transferRightName }}</span>
          <span class="model-content-title otherTitle">(共{{ checkContent_right.length }}个)(可拖拽排序)</span>
        </a-row>
        <a-row>
          <div class="model-content" id="scroll">
            <div class="model-content-header">
              <a-checkbox class="checkBoxNum" :indeterminate="indeterminate_right" :checked="isCheckAll_right"
                          :disabled="checkContent_right.length<1 ? true : false"
                          @change="onChange_all_right">
                {{ checkedList_right.length }}条
              </a-checkbox>
            </div>
            <div class="model-content-bottom">
              <div class="model-content-bottom-search">
                <a-input-search placeholder="请输入" v-model="searchKeyRight" allow-clear
                                @change="onSearchRight(searchKeyRight)" @search="onSearchRight(searchKeyRight)"/>
              </div>
              <div class="model-content-bottom-conts" ref="DOM">
                <a-checkbox-group v-model="checkedList_right" @change="onChange_one_right">
                  <draggable v-model="checkContent_right" ghostClass="ghost" chosenClass="chosen" forceFallback="true"
                             group="projectType"
                             animation="100" @start="onStart" @end="onEnd">
                    <transition-group>
                      <div :class="[searchRightIndex === index ? 'checkCont-pull-select':'checkCont-pull']" ref="index"
                           style="width:98% "
                           v-for="(item,index) in checkContent_right"
                           :key="index+1">
                        <a-checkbox class="checkBoxNum" :key="item" :value="item">
                          <img class="checkName" style="margin-left: 8px;margin-right: 8px;"
                               src="../../assets/todo/tuozhuaidian.svg"/>
                          <a-tooltip v-if="item.length>5">
                            <template slot="title">
                              {{ item }}
                            </template>
                            <span class="checkName">{{ setPoint(item, 5) }}</span>
                          </a-tooltip>
                          <span class="checkName" v-else>{{ setPoint(item, 5) }}</span>
                        </a-checkbox>
                        <!--                        <img src="../../assets/todo/shangyijiantou.svg"
                                                     style="float: right;padding-top: 5px;cursor: pointer"
                                                     v-if="index>0" @click=""/>-->
                      </div>
                    </transition-group>
                  </draggable>
                </a-checkbox-group>
              </div>
            </div>
          </div>
        </a-row>
      </a-col>
    </a-row>
  </a-modal>
</template>
<script>
import draggable from 'vuedraggable'
import {getCustomizeHeaders, putCustomizeHeaders} from '@/api/getTableHead'
import _ from 'lodash'
let userinfo = JSON.parse(sessionStorage.getItem('userInfo'))
export default {
  name: "index",
  data() {
    return {
      maskClosable: false,//点击遮盖层是否可关闭
      leftSearchInput: '',//左侧搜索框内容
      drag: false,
      modalVisible: true,//弹框显隐
      checkContent_left: [],//左侧数据
      checkContent_left_search: [],//左侧数据(搜索后)
      btnDisable_left: false,//左边移动按钮禁用
      checkedList_left: [],//左侧选中的数据(全部/非全部)
      checkedList_leftAll: [],//左侧选中的数据(全部)
      isCheckAll_left: false,//左侧全选按钮
      indeterminate_left: true,//左侧非全选复选框显示小方块
      checkContent_right: this.thisTableHeaderDataMiddel,//右侧数据
      checkContent_right_search: [],//右侧数据(搜索后)
      btnDisable_right: true,//右边移动按钮禁用
      checkedList_right: [],//右侧选中的数据(全部/非全部)
      checkedList_rightAll: [],//右侧选中的数据(全部)
      isCheckAll_right: false,//右侧全选按钮
      indeterminate_right: true,//右侧非全选复选框显示小方块
      thisTableHeaderDataOld: [],//先克隆传过来的数据
      thisTableHeaderDataMiddelOld: [],//先克隆传过来的数据
      searchKeyRight: '',//右侧搜索框内容
      searchRightIndex: -1,//右侧搜索框关键字搜索出来的数据的下标
      // allTableHeaderData: this.thisTableHeaderData,//当前表格表头的原始所有数据
      allTableHeaderData: [],//当前表格表头的原始所有数据
      /*allTableHeaderDataSort:[],//当前表格全部表头排序的数据(左侧暂不用排序)*/
    };
  },
  watch: {
    /*tableHeaderModalVisible(val) {
      this.modalVisible = val
    },*/
    thisTableHeaderDataMiddel(val) {
      this.checkContent_right = val
    }
  },
  /*'thisTableName---当前表格名称','thisTableHeaderData--当前表格所有表头数据','thisTableHeaderDataMiddel--当前表格存在中台的表头数据'*/
  props: {
    /*tableHeaderModalVisible: {
      type: Boolean,
      default: false
    },//设置表头modal可见*/
    thisTableName: {
      type: String,
      default: '执行任务'
    },//当前表格名称
    thisTableHeaderData: {
      type: Array,
      default: () => []
    },//当前表格所有表头数据
    thisTableHeaderDataMiddel: {
      type: Array,
      default: () => []
    },//当前表格存在中台的表头数据
    transferName: {
      type: String,
      default: '表头设置'
    },//穿梭框标题
    transferLeftName: {
      type: String,
      default: '可选字段'
    },//穿梭框左侧标题
    transferRightName: {
      type: String,
      default: '已选字段'
    },//穿梭框右侧标题
    reset: {
      type: Boolean,
      default: true
    },//是否显示  恢复默认值
    /*thisTableHeaderDataSort: {
      type: Array,
      // default: () => ["操作","主题","上下文","状态","角色","状况","备注","进程名称","创建时间","工作负责人","pbo类型","最后期限","完成者","完成日期","进程启动者"]
      default: () => []
    },//当前表格全部表头排序的数据(左侧暂不用排序)*/
  },
  components: {
    draggable,
  },
  mounted() {
    this.init()
  },
  created() {
  },
  methods: {
    //默认打开加载的方法
    init() {
      // console.log('所有数据：', this.thisTableHeaderData)
      this.allTableHeaderData = _.clone(this.thisTableHeaderData)//先将当前表格的所有表头数据克隆保存
      /*this.allTableHeaderDataSort = _.clone(this.thisTableHeaderDataSort)//先将当前表格全部表头排序的数据克隆保存(左侧暂不用排序)*/
      //显示左侧数据,总的表头数据-中台存储的表头数据，并按照给定的顺序排序
      let yuanshiTab = _.clone(this.thisTableHeaderData)//先将当前表格的所有表头数据克隆保存
      //获取
      for (let i = 0; i < this.thisTableHeaderDataMiddel.length; i++) {
        if (yuanshiTab.findIndex(item => item.displayName === this.thisTableHeaderDataMiddel[i]) > -1) {
          yuanshiTab.splice(yuanshiTab.findIndex(item => item.displayName === this.thisTableHeaderDataMiddel[i]), 1)
        }
      }
      /*//左侧暂不用排序
      console.log('yuanshishuju排序前------',yuanshiTab)
      //如果 “当前表格全部表头排序的数据”不为空，则左侧排序
      if(this.thisTableHeaderDataSort.length>0){
        yuanshiTab = _.sortBy(yuanshiTab, (rec) => {
          return this.thisTableHeaderDataSort.indexOf(rec.displayName)
        })
        console.log('yuanshishuju------排序后',yuanshiTab)
      }*/
      this.checkContent_left = _.flatMap(yuanshiTab, function (n) {
        return n.displayName
      });
      //先克隆传过来的数据
      // let that = this;
      this.thisTableHeaderDataOld = _.clone(this.checkContent_left);
      this.thisTableHeaderDataMiddelOld = _.clone(this.thisTableHeaderDataMiddel);
      // console.log('左侧数据：', this.checkContent_left)
      //显示左侧数据选中情况
      // this.checkedList_left = this.checkContent_left.filter(item => item.isChecked).map(item => item.content);
      this.checkedList_leftAll = _.clone(this.checkContent_left)
      //显示右侧数据选中情况
      // this.checkedList_right = this.thisTableHeaderDataMiddel
      this.checkedList_rightAll = _.clone(this.checkContent_right)
      // console.log('默认显示右侧选中数据---》', this.checkedList_right)
      this.toRightBtn(this.checkedList_left)//默认显示往右移动数据按钮的状态
      this.toLeftBtn(this.checkedList_right)//默认显示往左移动数据按钮的状态
      this.left_content_checked(this.checkedList_left)//左侧全选checkbox的状态
      this.right_content_checked(this.checkedList_right)//右侧全选checkbox的状态
      this.checkContent_left_search = _.clone(this.checkContent_left);
      this.checkContent_right_search = _.clone(this.checkContent_right)
    },
    //关闭弹框
    closeModal() {
      // this.toDefault()
      this.$emit('closeTableHeaderModal')
    },
    //确定保存
    saveHeader() {
      if (this.transferName === '表头设置' && this.transferName !== '' && this.transferName !== null) {
        // console.log('tableName：', this.thisTableName, '   labelList:', this.checkedList_right,'  userInfo:',userinfo.loginName)
        userinfo = userinfo || JSON.parse(sessionStorage.getItem('userInfo'))
        let params = {
          "labelList": this.checkContent_right.toString(),
          "tableName": this.thisTableName,
          "userId": userinfo.loginName
        }
        putCustomizeHeaders(params).then(res => {
          // console.log(res)
          if (res.status == 200 && res.data && res.data.result) {
            this.$store.commit('countAdd', this.thisTableName)//刷新表格
            this.$message.success('"' + this.thisTableName + '"表头设置成功！')
            //修改下,有的地方要用返回值,不影响其他地方
            this.$emit('closeTableHeaderModal', res.data.labelList)
          } else {
            this.$message.error('已选字段不能为空！')
          }
        })
      } else {
        this.$emit('saveMiddleData', this.checkContent_right)
        this.$emit('closeTableHeaderModal')
      }
    },
    //复选框--左侧全选
    onChange_all_left(e) {
      let newCheckData = Object.assign(this, {
        checkedList_left: e.target.checked ? this.checkedList_leftAll : [],
        indeterminate_left: false,
        isCheckAll_left: e.target.checked,
      });
      // console.log(this.checkedList_leftAll)
      this.checkedList_left = newCheckData.checkedList_left
      // console.log('左侧选中数据-->', this.checkedList_left)
      this.toRightBtn(this.checkedList_left)//默认显示往右移动数据按钮的状态
    },
    //复选框--左侧单选
    onChange_one_left(e) {
      // console.log('左侧选中数据-->', e)
      this.checkedList_left = e;
      this.left_content_checked(e);//左侧全选checkbox的状态
      this.toRightBtn(this.checkedList_left)//默认显示往右移动数据按钮的状态
    },
    //左侧全选checkbox的状态
    left_content_checked(e) {
      if (e.length == this.checkedList_leftAll.length) {
        if (e.length == 0) {
          this.isCheckAll_left = false
          this.indeterminate_left = false
        } else {
          this.isCheckAll_left = true
          this.indeterminate_left = false
        }
      } else {
        if (e.length == 0) {
          this.isCheckAll_left = false
          this.indeterminate_left = false
        } else {
          this.isCheckAll_left = false
          this.indeterminate_left = true
        }
      }
    },
    //复选框--右侧全选
    onChange_all_right(e) {
      let newCheckData = Object.assign(this, {
        checkedList_right: e.target.checked ? this.checkedList_rightAll : [],
        indeterminate_right: false,
        isCheckAll_right: e.target.checked,
      });
      this.checkedList_right = newCheckData.checkedList_right
      // console.log('右侧选中数据-->', this.checkedList_right)
      this.toLeftBtn(this.checkedList_right)//默认显示往左移动数据按钮的状态
    },
    //复选框--右侧单选
    onChange_one_right(e) {
      // console.log('右侧选中数据-->：', e)
      this.checkedList_right = e;
      this.right_content_checked(e)//右侧全选checkbox的状态
      this.toLeftBtn(this.checkedList_right)//默认显示往左移动数据按钮的状态
    },
    //右侧全选checkbox的状态
    right_content_checked(e) {
      if (e.length == this.checkedList_rightAll.length) {
        if (e.length == 0) {
          this.isCheckAll_right = false
          this.indeterminate_right = false
        } else {
          this.isCheckAll_right = true
          this.indeterminate_right = false
        }
      } else {
        if (e.length == 0) {
          this.isCheckAll_right = false
          this.indeterminate_right = false
        } else {
          this.isCheckAll_right = false
          this.indeterminate_right = true
        }
      }
    },
    //默认显示往右移动按钮的状态
    toRightBtn(checkData) {
      if (checkData.length > 0) {
        this.btnDisable_right = false
      } else {
        this.btnDisable_right = true
      }
    },
    //默认显示往左移动按钮的状态
    toLeftBtn(checkData) {
      if (checkData.length > 0) {
        this.btnDisable_left = false
      } else {
        this.btnDisable_left = true
      }
    },
    //往右移动，默认显示左右移动按钮的状态
    toRightContent(allData, checkData) {
      let checkData2 = _.clone(checkData), allData2 = _.clone(allData)
      _.remove(allData2, function (n) {
        return _.includes(checkData2, n);
      })
      this.checkContent_left = _.remove(_.clone(this.checkContent_left), (rec) => !_.includes(checkData, rec))
      // console.log(this.checkContent_left, this.thisTableHeaderDataOld)
      let newRightData = _.concat(this.checkContent_right, checkData)
      this.checkContent_right = _.clone(newRightData)
      this.checkedList_left = []//重新赋值
      this.checkedList_leftAll = _.clone(this.checkContent_left)//重新赋值
      this.checkedList_rightAll = _.clone(this.checkContent_right)//重新赋值
      // search old
      this.checkContent_left_search = _.clone(allData2)
      this.checkContent_right_search = _.clone(_.concat(_.clone(this.checkContent_right_search), checkData))
      this.left_content_checked(this.checkedList_left);//左侧全选checkbox的状态
      this.toRightBtn(this.checkedList_left)//默认显示往右移动按钮的状态
    },
    //往左移动，默认显示左右移动按钮的状态
    toLeftContent(allData, checkData) {
      let checkData2 = _.clone(checkData), allData2 = _.clone(allData)
      _.remove(allData2, function (n) {
        return _.includes(checkData2, n);
      })
      this.checkContent_right = _.remove(_.clone(this.checkContent_right), (rec) => !_.includes(checkData, rec))
      let newRightData = _.concat(this.checkContent_left, checkData2)
      this.checkContent_left = _.clone(newRightData)
      this.checkedList_right = []//重新赋值
      this.checkedList_rightAll = _.clone(this.checkContent_right)//重新赋值
      this.checkedList_leftAll = _.clone(this.checkContent_left)//重新赋值
      // search old
      this.checkContent_left_search = _.clone(_.concat(_.clone(this.checkContent_left_search), checkData))
      this.checkContent_right_search = _.clone(allData2)
      this.right_content_checked(this.checkedList_right)//右侧全选checkbox的状态
      this.toLeftBtn(this.checkedList_right)//默认显示往左移动按钮的状态
    },
    //搜索框--左边
    onSearchLeft(value) {
      let leftCurr = _.clone(this.checkContent_left_search);
      // if (value && value.length >= 0) {
      if (value) {
        let result = _.filter(_.clone(leftCurr), (rec) => {
          return _.includes(rec, value);
        })
        this.checkContent_left = _.clone(result)
        this.checkedList_leftAll = _.clone(result)
      } else {
        this.checkContent_left = _.clone(leftCurr)
        this.checkedList_leftAll = _.clone(leftCurr)
      }
    },
    //搜索框--右边
    onSearchRight(value) {
      /* //---------------正常搜索开始--this.checkContent_right----------------
      let middleCurr = _.clone(this.checkContent_right_search);
      if (value && value.length >= 0) {
        let result = _.filter(_.clone(middleCurr), (rec) => {
          return _.includes(rec, value);
        })
        this.checkContent_right = _.clone(result)
        this.checkedList_rightAll = _.clone(result)
      } else {
        this.checkContent_right = _.clone(middleCurr)
        this.checkedList_rightAll = _.clone(middleCurr)
      }
      //---------------正常搜索结束------------------   */
      // console.log('第一条数据的位置：',this.$refs.index[0].offsetTop)
      //关键字搜索，搜索出的数据显示背景色，滚动条自动滚到当前数据
      let middleCurr = _.clone(this.checkContent_right_search);
      // if (value && value.length >= 0) {
      if (value) {
        this.searchRightIndex = _.findIndex(middleCurr, function (o) {
          return o.indexOf(value) > -1
        })
        if (this.searchRightIndex > -1) {
          this.$refs.DOM.scrollTo(0, this.$refs.index[this.searchRightIndex].offsetTop - 270)
        } else {
          this.$refs.DOM.scrollTo(0, 0)
        }
      } else {
        this.searchRightIndex = -1
        this.$refs.DOM.scrollTo(0, 0)
      }
      this.searchKeyRight = value
      this.checkContent_right = _.clone(middleCurr)
      this.checkedList_rightAll = _.clone(middleCurr)
    },
    //截取名称
    setPoint(value, length) {
      if (length > 0 && value.length > length) {
        return value.substring(0, length) + '...'
      } else {
        return value
      }
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
      this.checkContent_right_search = _.clone(this.checkContent_right)
      this.onSearchRight(this.searchKeyRight)
    },
    //恢复默认值
    toDefault() {
      // console.log(this.thisTableHeaderDataOld, this.thisTableHeaderDataMiddelOld)
      if (this.transferName === '表头设置') {
        //"表头设置"恢复默认值逻辑：右侧显示admin（公共）账号存储的数据，左侧过滤显示
        //1.获取中台admin（公共账号）接口
        let middleParms = {
          "tableName": this.thisTableName,
          "userId": 'admin'
        }
        getCustomizeHeaders(middleParms).then(res => {
          // console.log(res)
          if (res.status === 200 && res.data) {
            let middleHeadersDataOld = res.data.labelList
            if (middleHeadersDataOld.length > 0) {
              this.checkContent_right = middleHeadersDataOld.split(',')
              this.checkedList_rightAll = _.clone(middleHeadersDataOld.split(','))
              this.checkedList_right = []
            } else {
              this.checkContent_right = []
              this.$message.error('当前表格未设置默认表头！')
            }
          } else {
            this.$message.error('获取表头失败')
            this.checkContent_right = []
          }
          // console.log('this.checkContent_right---------------->', this.checkContent_right)
          // console.log('this.allTableHeaderData---------------->', this.allTableHeaderData)
          //显示左侧数据,总的表头数据-中台存储的表头数据
          for (let i = 0; i < this.checkContent_right.length; i++) {
            if (this.allTableHeaderData.findIndex(item => item.displayName === this.checkContent_right[i]) > -1) {
              this.allTableHeaderData.splice(this.allTableHeaderData.findIndex(item => item.displayName === this.checkContent_right[i]), 1)
            }
          }
          /*//左侧暂不用排序
          console.log('allTableHeaderDataSort排序前------',this.allTableHeaderData)
          //如果 “当前表格全部表头排序的数据”不为空，则左侧排序
          if(this.allTableHeaderDataSort.length>0){
            this.allTableHeaderData = _.sortBy(this.allTableHeaderData, (rec) => {
              return this.allTableHeaderDataSort.indexOf(rec.displayName)
            })
            console.log('allTableHeaderDataSort------排序后',this.allTableHeaderData)
          }*/
          this.checkContent_left = _.flatMap(this.allTableHeaderData, function (n) {
            return n.displayName
          });
          this.checkedList_leftAll = _.clone(_.flatMap(this.allTableHeaderData, function (n) {
            return n.displayName
          }))
          this.checkedList_left = []
          this.toRightBtn(this.checkedList_left)//默认显示往右移动数据按钮的状态
          this.toLeftBtn(this.checkedList_right)//默认显示往左移动数据按钮的状态
          this.left_content_checked(this.checkedList_left)//左侧全选checkbox的状态
          this.right_content_checked(this.checkedList_right)//右侧全选checkbox的状态
        })
      } else {
        this.checkContent_left = _.clone(this.thisTableHeaderDataOld)
        this.checkContent_right = _.clone(this.thisTableHeaderDataMiddelOld)
        this.checkedList_leftAll = _.clone(this.thisTableHeaderDataOld)
        this.checkedList_rightAll = _.clone(this.thisTableHeaderDataMiddelOld)
      }
      // this.leftSearchInput = ''
      // this.searchKeyRight = ''
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-modal {
  width: 800px !important;
}
/deep/ .ant-modal-title {
  font-size: 16px;
  color: #666666;
  font-weight: 600;
}
/deep/ .ant-modal-body {
  height: 458px;
  padding: 0 24px 0 24px;
}
/deep/ .ant-checkbox + span {
  padding-left: 3px;
}
.tableHeaderModal {
  padding: 24px 0 24px 0px;
  .model-content-title {
    display: inline-block;
    padding: 5px 5px 5px 0px;
    font-size: 14px;
    color: #333333;
  }
  .otherTitle {
    color: #999999;
  }
  .model-content {
    width: 100%;
    height: 365px;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
  }
  .model-content-header {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #dddddd;
    .checkBoxNum {
      padding: 8px;
      color: #666666;
      font-size: 14px;
    }
  }
  .model-content-bottom {
    .model-content-bottom-search {
      padding: 6px;
      //background-color: red;
    }
    .model-content-bottom-conts {
      padding: 6px;
      height: 270px;
      overflow-y: auto;
      //background-color: gray;
      /*display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;*/
      div {
        width: 100%;
      }
      .checkCont {
        width: 145px;
        height: 30px;
      }
      .checkCont-pull {
        width: 145px;
        height: 30px;
        cursor: move;
        padding: 3px;
        margin-bottom: 3px;
      }
      .checkCont-pull:hover {
        width: 145px;
        height: 30px;
        cursor: move;
        padding: 3px;
        margin-bottom: 3px;
        box-shadow: 0px 10px 13px -13px #000,
          0px -10px 13px -13px #000;
      }
      .checkCont-pull-select {
        width: 145px;
        height: 30px;
        cursor: move;
        background-color: #E8F0FD;
        padding: 3px;
        margin-bottom: 3px;
      }
    }
  }
  .model-content-footer {
    width: 100%;
    height: 40px;
    background-color: red;
    display: block;
  }
  /*被拖拽对象的样式*/
  .item {
    padding: 6px;
    background-color: #fdfdfd;
    border: solid 1px #eee;
    margin-bottom: 10px;
    cursor: move;
  }
  /*选中样式*/
  .chosen {
    background-color: #ffffff !important;
  }
  /deep/ .ghost {
    background-color: #E8F0FD !important;
  }
  /deep/ .ant-checkbox-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .checkName {
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
  }
}
</style>